<template>
  <el-dialog :visible.sync="visible" title="待发货" width="800" @close="QualityDialogClose">
    <section ref="print">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-position="left"
        label-width="100px"
      >
        <el-form-item label="物流公司" prop="deliveryCompany">
          <el-select
            v-model="ruleForm.deliveryCompanyIndex"
            placeholder="请选择物流公司"
            @change="onChange"
          >
            <el-option
              v-for="(item,index) in expressCompanies"
              :label="item.deliveryCompany"
              :value="index"
              :key="index"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="运单号" prop="deliverySn">
          <el-input v-model="ruleForm.deliverySn" />
        </el-form-item>
        <!-- <el-form-item label="订单id" >
          <el-input v-model="ruleForm.orderId" disabled />
        </el-form-item> -->
      </el-form>
    </section>
    <span slot="footer" class="dialog-footer">
      <el-button @click="QualityDialogClose">取 消</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  props: {
    quality: {
      type: Boolean,
      default: false
    },
    orderId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      ruleForm: {
        deliveryCompanyIndex: '',
        deliveryCompany: '',
        deliverySn: '',
        orderId: this.orderId,
        deliveryCompanyCode: ''
      },
      visible: this.quality,
      expressCompanies: [
        { deliveryCompany: '申通快递', deliveryCompanyCode: 'STO' },
        { deliveryCompany: '天天快递', deliveryCompanyCode: 'TTKDEX' },
        { deliveryCompany: '顺丰快递', deliveryCompanyCode: 'SFEXPRESS' }
      ],
      rules: {
        deliverySn: [
          { required: true, message: '请输入运单号', trigger: 'blur' }
        ],
        deliveryCompany: [
          { required: true, message: '物流公司', trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    quality() {
      this.visible = this.quality
    },
    orderId() {
      this.ruleForm.orderId = this.orderId
    }
  },
  methods: {
    QualityDialogClose() {
      this.$emit('update:quality', false)
    },
    onChange(e) {
      const data = this.expressCompanies[e]
      this.ruleForm.deliveryCompany = data.deliveryCompany
      this.ruleForm.deliveryCompanyCode = data.deliveryCompanyCode
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.QualityDialogClose()
          this.$emit('onShipOrder', this.ruleForm)
        } else {
          return false
        }
      })
    }
  }
}
</script>
